<template>
  <div class="home">
    <el-header>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h2>这是一个标签</h2>
          </div>
        </el-col>
        <el-col :span="8"
          ><div class="grid-content bg-purple-light">
            <div class="title">
              <!-- <el-tabs v-model="activeName">
                <el-tab-pane label="首页" name="start">首页</el-tab-pane>
                <el-tab-pane label="分类" name="class">分类</el-tab-pane>
                <el-tab-pane label="标签" name="label">标签</el-tab-pane>
                <el-tab-pane label="归档" name="archive">归档</el-tab-pane>
              </el-tabs> -->
              <router-link to="/home/start" tag="span" @click.native="openFun111">首页</router-link>
              <router-link to="/home/class" tag="span" @click.native="openFun">分类</router-link>
              <router-link to="/home/label" tag="span" @click.native="openFun">标签</router-link>
              <router-link to="/home/archive" tag="span" @click.native="openFun">归档</router-link>
            </div>
          </div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <el-input
              placeholder="搜索待开发..."
              prefix-icon="el-icon-search"
              v-model="input"
            >
            </el-input>
            <el-button class="home-btn" type="primary" @click="loginFun">登录</el-button>
          </div></el-col
        >
      </el-row>
    </el-header>
    <el-main>
      <div class="cont">
        <el-row :gutter="20">
          <el-col :span="17"
            ><div class="grid-content bg-purple">
              <router-view></router-view></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <div class="user">
                <img
                  src="http://47.104.167.34:9000/byesame2023/5d0442f63c2f4f68b36afd5701c44139.png"
                  alt=""
                />
                <p>这里是用户的名字</p>
                <span>这里是用户的简介</span>
              </div>
              <div class="class-list" v-show="open">
                <h3>分类</h3>
                <div v-for="item in classList" :key="item.id" >
                  <i class="el-icon-folder-opened"></i>
                  {{ item.name }}
                </div>
              </div>
              <div class="tags-list" v-show="open">
                <h3>标签</h3>
                <div class="tags-item">
                <div v-for="item in tagsList" :key="item.id">{{item.name}}</div>
                </div>
              </div>
              
            </div></el-col
          >
        </el-row>
      </div>
    </el-main>
    <el-footer>
      <span>这儿是左下角</span>
      <span>这边是右下角</span>
    </el-footer>
  </div>
</template>

<script>
import { Class } from "../units/api.js";
import { Tag } from "../units/api.js";
export default {
  data() {
    return {
      open:true,
      input: "",
      classList: [],
      tagsList:[]
    };
  },
  created() {
    this.getClass();
    this.getTags()
  },
  methods: {
    async getClass() {
      let res = await Class();
      console.log("这是获取的类型列表", res);
      if (res.status == 200) {
        this.classList = res.data.data;
      }
    },
    async getTags(){
      let res = await Tag()
      console.log("这是获取的标签列表",res);
      if(res.status == 200){
        this.tagsList = res.data.data
      }
      
    },
    openFun(){
      this.open = false
      console.log("点击了",this.open);
    },
    openFun111(){
      this.open = true
      console.log("点击了",this.open);
    },
    loginFun(){
      this.$router.push("/login")
    }
  },
};
</script>

<style scoped>
.home {
  box-sizing: border-box;
}
.cont {
  background-color: #f4f4f4;
}
.title > span {
  width: 60px;
  padding: 10px;
}
.title > span:hover {
  color: #0099ff;
}
.router-link-exact-active {
  color: #0099ff;
}
.el-header {
  padding: 10px;
}
.el-input {
  width: 220px;
}
.home-btn {
  margin-left: 20px;
}
.el-footer {
  display: flex;
  justify-content: space-between;
}
.user {
  margin-top: 1vw;
  padding: 20px 0;
  border: 1px solid #b5b5b5;
  border-radius: 8px;
  background-color: white;
}
.user > img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.user > p {
  margin: 10px 0;
  font-size: 18px;
  font-weight: bolder;
}
.user > span {
  font-size: 14px;
  color: #cacdd2;
}
.class-list,.tags-list{
  margin-top: 1vw;
  background-color: white;
  border: 1px solid #b5b5b5;
  border-radius: 8px;

}
.class-list > div {
  margin-left: 50px;
  text-align: start;
  padding: 10px 5px;
}
.tags-item{
  display: flex;
  flex-wrap: wrap;
}
 .tags-item>div{
  margin: 4px 8px;
  padding:3px 5px;
  border-radius: 4px;
  background-color: #edf7ec;
 }
</style>
